<template>
	<view class="forgot-withdraw-password">
		<view class="forgot-withdraw-password-cell">
			<text>手机号码</text>
			<input type="digit" placeholder="您的手机号码" v-model="form.phone" placeholder-style="color:#C9C9C9" />
		</view>
		<view class="forgot-withdraw-password-cell">
			<text>验证码</text>
			<input type="digit" placeholder="验证码" v-model="form.code" placeholder-style="color:#C9C9C9"/>
			<button size="mini" type="primary" @click="getCode" v-if="!isSend" hover-class="">获取验证码</button>
			<button size="mini" type="primary" :disabled="true" v-else>{{count}}s</button>
		</view>
		<view class="forgot-withdraw-password-cell">
			<text>新密码</text>
			<input type="password" placeholder="新提现密码" v-model="form.privat_key" placeholder-style="color:#C9C9C9"/>
		</view>
		<view class="forgot-withdraw-password-cell">
			<text>确认密码</text>
			<input type="password" placeholder="再输入一次" v-model="form.confirm_privat_key" placeholder-style="color:#C9C9C9"/>
		</view>
		<view class="forgot-withdraw-password-cell">
			<button type="primary" :disabled="form.phone&form.code&form.privat_key&form.confirm_privat_key?false:true" class="submit" @click="submit" hover-class="">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSend: false,
count: 60,
				form: {
					phone: '',
					code: '',
					privat_key: '',
					confirm_privat_key: ''
				}
			};
		},
		methods: {
			// 获取验证码
			getCode(){
				let phoneRexp = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/;
				if(!this.form.phone){
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return false
				}else if(!phoneRexp.test(this.form.phone)){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					})
					return false
				}
				this.$api.PhoneGetCode({phone: this.form.phone, login_code: 'login'}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '发送成功',
						duration: 1500
					})
					this.isSend = true
					let countsDown = setInterval(() => {
						this.count--
						if(this.count==0){
							this.isSend = false
							this.count = 60
							clearInterval(countsDown)
						}
					},1000)
				})
			},
			// 修改密码提交
			submit(){
				if(!this.form.phone){
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return false
				}else if(!this.form.code){
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false
				}else if(!this.form.privat_key){
					uni.showToast({
						icon: 'none',
						title: '请输入新提现密码'
					})
					return false
				}else if(!this.form.confirm_privat_key){
					uni.showToast({
						icon: 'none',
						title: '请再次输入提现密码'
					})
					return false
				}else if(this.form.privat_key!=this.form.confirm_privat_key){
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一致'
					})
					return false
				}else{
					this.$api.UpWalletPsd(this.form).then(res => {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/my/wallet/wallet'
							})
						},1500)
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFF;
	}
	.forgot-withdraw-password{
		.forgot-withdraw-password-cell{
			padding: 0 30rpx;
			position: relative;
			border-bottom: solid 1px #EEE;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			text{
				width: 5em;
			}
			&:last-child{
				border-bottom: none;
				margin-top: 80rpx;
			}
			view{
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				color: #2073F5;
				font-size: 32rpx;
			}
			input{
				flex: 1;
				font-size: 32rpx;
				padding: 30rpx 0;
			}
			button.submit{
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 36rpx;
				background-color: #2073F5;
				border-radius: 100rpx;
				margin: 0 75rpx;
			}
		}
	}
</style>